<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts</title>
    <script src="echarts.min.js"></script>

</head>
<body>
<div id="main" style="width: 1200px; height: 400px;"></div>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: '外贸出口先导指数'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['外贸出口先导指数','出口经理人指数','新增出口订单指数','出口企业综合成本指数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2014.07', '2014.08', '2014.09', '2014.10', '2014.11', '2014.12', '2015.01', '2015.02', '2015.03', '2015.04', '2015.05', '2015.06', '2015.07', '2015.08', '2015.09', '2015.10', '2015.11', '2015.12', '2016.01', '2016.02', '2016.03', '2016.04', '2016.05', '2016.06', '2016.07', '2016.08', '2016.09', '2016.10', '2016.11', '2016.12', '2017.01', '2017.02', '2017.03', '2017.04', '2017.05', '2017.06', '2017.07', '2017.08', '2017.09', '2017.10', '2017.11', '2017.12', '2018.01', '2018.02', '2018.03', '2018.04']
        },
        yAxis: {
            type: 'value',
            name: '销量',
            min: 10,
            max: 50,
            interval: 10
        },

        series: [
            {
                name:'外贸出口先导指数',
                type:'line',
                data:[ 42.6, 41.9, 43.3, 41.7, 40.8, 40.1, 38.6, 39.6, 38.2, 35.9, 35.0, 34.8, 34.1, 34.0, 34.0, 32.8, 31.8, 31.2, 31.7, 31.3, 31.6, 33.8, 33.1, 32.7, 33.8, 34.7, 35.8, 35.6, 36.9, 37.4, 39.0, 40.2, 40.2, 40.7, 41.1, 41.5, 41.9, 41.9, 41.8, 41.6, 41.8, 41.4, 41.6, 41.4, 41.0, 41.0]
            },
            {
                name:'出口经理人指数',
                type:'line',
                data:[43.0, 42.3, 44.8, 42.9, 42.1, 40.8, 41.2, 41.1, 40.0, 39.5, 38.1, 36.5, 36.6, 34.0, 33.7, 32.5, 32.8, 32.7, 33.4, 32.7, 36.1, 37.5, 36.3, 35.9, 36.9, 38.7, 39.9, 39.2, 40.0, 39.4, 41.5, 41.6, 43.8, 44.8, 45.2, 44.7, 44.9, 44.7, 43.9, 43.4, 44.8, 44.2, 43.4, 43.8, 44.3, 44.0]
            },
            {
                name:'新增出口订单指数',
                type:'line',
                data:[46.7, 45.5, 48.0, 45.1, 44.0, 43.1, 44.0, 42.5, 40.4, 39.6, 37.7, 36.2, 35.8, 33.3, 32.7, 30.8, 31.6, 31.6, 33.3, 31.9, 35.7, 37.3, 35.5, 35.4, 36.3, 38.4, 40.3, 39.5, 41.3, 41.9, 43.9, 44.1, 46.4, 48.2, 48.8, 48.5, 48.4, 47.8, 47.1, 46.4, 48.7, 48.3, 48.8, 46.6, 47.8, 47.9]
            },
            {
                name:'出口企业综合成本指数',
                type:'line',
                data:[22.0, 22.4, 23.2, 24.4, 23.9, 25.3, 26.0, 26.2, 26.7, 26.2, 26.8, 26.4, 27.7, 28.4, 28.5, 28.9, 29.3, 29.7, 29.9, 29.8, 29.1, 28.3, 29.1, 29.0, 28.0, 27.9, 27.6, 27.4, 25.5, 23.9, 22.8, 21.6, 22.0, 23.2, 22.9, 23.0, 23.2, 22.6, 19.9, 21.1, 20.1, 20.5, 19.9, 21.1, 20.9, 20.5]
            }

        ]
    };

    myChart.setOption(option);
</script>

</body>
</html>